<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024/6/25 下午5:25
 * @LastEditors: tenet 18742176629@163.com
 * @LastEditTime: 2024/6/25 下午5:25
 * @FilePath: G:/block-watch-sys/src/views/user\queryBar.vue
 * @Description: Description
-->
<template>
  <!-- 查询 -->
  <div class="queryBar">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item :label="$t('user.UserName')" style="width: 250px; margin-bottom:0; margin-right: 20px">
        <el-input v-model.trim="queryParams.id" :placeholder="$t('global.PleaseInput') + $t('user.UserName')"
                  clearable />
      </el-form-item>
      <el-form-item :label="$t('user.UserStatus')" style="width: 250px; margin-bottom: 0; margin-right: 20px">
        <el-select v-model.trim="queryParams.orderStatus"
                   :placeholder="$t('global.PleaseSelect') + $t('user.UserStatus')" clearable>
          <el-option v-for="(item, index) in orderStatusOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 0">
        <el-button type="primary" :icon="Search" round @click="onSubmit(queryParams.id, queryParams.orderStatus)">{{
            $t('button.Search')
          }}</el-button>
        <el-button type="default" :icon="Refresh" round plain @click="onReset()">{{ $t('button.Reset') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted, unref, reactive } from 'vue'
import {Refresh, Search} from "@element-plus/icons-vue";

import {useI18n} from "vue-i18n";
const { t } = useI18n();
// 查询参数
const queryParams = reactive([
  {
    id: '',
    orderStatus: ''
  }
])
</script>

<style scoped lang="less">
.queryBar{
  background-color: #fff;
}
</style>